<template>
  <div>

    <sky-panel title="分栏偏移">
      <template v-slot:main>

            <sky-layout-row>
              <sky-layout-col :span="6">
                <div class="grid-content bg-purple-light"></div>
              </sky-layout-col>
              <sky-layout-col :span="6" :offset="6">
                <div class="grid-content bg-purple"></div>
              </sky-layout-col>
            </sky-layout-row>

            <sky-layout-row>
              <sky-layout-col :span="6" :offset="6">
                <div class="grid-content bg-purple-light"></div>
              </sky-layout-col>
              <sky-layout-col :span="6" :offset="6">
                <div class="grid-content bg-purple"></div>
              </sky-layout-col>
            </sky-layout-row>             

      </template>
    </sky-panel>

  <sky-code-panel>
    <div class="prewrap" v-highlight>
      <!-- 使用指令 -->
      <pre>
        <code class="html">

            &lt;sky-layout-row&gt;
              &lt;sky-layout-col :span="6"&gt;
                &lt;div class="grid-content bg-purple-light"&gt;&lt;/div&gt;
              &lt;/sky-layout-col&gt;
              &lt;sky-layout-col :span="6" :offset="6"&gt;
                &lt;div class="grid-content bg-purple"&gt;&lt;/div&gt;
              &lt;/sky-layout-col&gt;
            &lt;/sky-layout-row&gt;

            &lt;sky-layout-row&gt;
              &lt;sky-layout-col :span="6" :offset="6"&gt;
                &lt;div class="grid-content bg-purple-light"&gt;&lt;/div&gt;
              &lt;/sky-layout-col&gt;
              &lt;sky-layout-col :span="6" :offset="6"&gt;
                &lt;div class="grid-content bg-purple"&gt;&lt;/div&gt;
              &lt;/sky-layout-col&gt;
            &lt;/sky-layout-row&gt;      

        </code>
    </pre>
    </div>
  </sky-code-panel>



  </div>
</template>

<script lang="ts">
  import { defineComponent } from "vue";

  export default defineComponent({
    setup() {},
  });
</script>

<style lang="scss" scoped>
/**容器内占位符样式 */
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
